<template>
    <div class="PositionView" :class="[(ReadOnly ? 'ReadOnly' : ' '), option.size || 'small']">
        <div class="Text">
            <div class="text">经</div>
            <div class="text">纬</div>
        </div>
        <div class="inputs" v-if="Status">
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" size="small" :controls="false" :bordered="false"
                    v-model:value="Data.longitude" :min="-180" :max="180" />
            </div>
            <div class="inputBox" v-else>{{ Data.longitude }}</div>
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" size="small" :controls="false" :bordered="false"
                    v-model:value="Data.latitude" :min="-90" :max="90" />
            </div>
            <div class="inputBox" v-else>{{ Data.latitude }}</div>
        </div>
        <div class="inputs" v-if="!Status">
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small" :controls="false"
                    :bordered="false" v-model:value="longitudeDegree.degree" :min="-180" :max="180" />
                <span>°</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small" :controls="false"
                    :bordered="false" v-model:value="longitudeDegree.minute" :min="0" :max="59" />
                <span>′</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="1" size="small" :controls="false"
                    :bordered="false" v-model:value="longitudeDegree.second" :min="0" :max="59" />
                <span>″</span>
            </div>
            <div class="inputBox" v-else>
                {{ longitudeDegree.degree }}°
                {{ longitudeDegree.minute }}′
                {{ longitudeDegree.second }}″
            </div>
            <div class="inputBox" v-if="!ReadOnly">
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small" :controls="false"
                    :bordered="false" v-model:value="latitudeDegree.degree" :min="-180" :max="180" />
                <span>°</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="0" size="small" :controls="false"
                    :bordered="false" v-model:value="latitudeDegree.minute" :min="0" :max="59" />
                <span>′</span>
                <a-input-number style="width:100%" id="inputNumber" :precision="1" size="small" :controls="false"
                    :bordered="false" v-model:value="latitudeDegree.second" :min="0" :max="59.99" />
                <span>″</span>
            </div>
            <div class="inputBox" v-else>
                {{ latitudeDegree.degree }}°
                {{ latitudeDegree.minute }}′
                {{ latitudeDegree.second }}″
            </div>
        </div>
        <div class="Button" @click="Status = !Status">
            <swap-outlined />
        </div>
    </div>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';
import { SwapOutlined } from '@ant-design/icons-vue';

const emit = defineEmits(['UpdateEvent']);

const props = defineProps({
    option: Object,
    Value: {},
});

const ReadOnly = ref(false);

const Status = ref(true);

if (props.option.showType) {
    Status.value = props.option.showType == 'Number';
}


function DDDToDMS(_data) {
    if (_data === null || _data === undefined) {
        return {
            degree: null,
            minute: null,
            second: null
        };
    }

    let value = parseFloat(_data);
    let _d = Math.floor(value);//度
    let _m = Math.floor((value - _d) * 60);
    let _s = parseFloat((value - _d) * 3600 % 60).toFixed(1);

    return {
        degree: _d,
        minute: _m,
        second: _s
    };
}

function DMSToDDD(_data) {
    let res = Math.abs(_data.degree) + (Math.abs(_data.minute) / 60 + Math.abs(_data.second) / 3600);
    res = parseFloat(res).toFixed(6);
    return res;
}

const Data = ref({
    longitude: 0,
    latitude: 0,
})

const KeyMapping = {
    longitude: 'longitude',
    latitude: 'latitude'
}

// 初始化值绑定
for (let i = 0; i < props.option.MultiKeyDefault.length; i++) {
    const element = props.option.MultiKeyDefault[i];
    watch(() => props.Value[element.ValueKey], (val) => {
        Data.value[element.FormKey] = val
    }, { immediate: true });
    KeyMapping[element.FormKey] = element.ValueKey;
}

const longitudeDegree = ref({
    degree: 0,
    minute: 0,
    second: 0
})

const latitudeDegree = ref({
    degree: 0,
    minute: 0,
    second: 0
})

watch(() => Data.value.longitude, val => {
    longitudeDegree.value = DDDToDMS(val);
    emit('UpdateEvent', KeyMapping.longitude, val)
}, { immediate: true })

watch(() => Data.value.latitude, val => {
    latitudeDegree.value = DDDToDMS(val);
    emit('UpdateEvent', KeyMapping.latitude, val)
}, { immediate: true })

watch(longitudeDegree, val => {
    if (!Status.value) {
        Data.value.longitude = DMSToDDD(val);
    }
}, { deep: true })

watch(latitudeDegree, val => {
    if (!Status.value) {
        Data.value.latitude = DMSToDDD(val);
    }
}, { deep: true })

</script>

<style lang="less" scoped>
.PositionView {
    user-select: none;
}

.View {
    margin-bottom: 8px;
}

.Text {
    width: 24px;
    height: 51px;
    text-align: center;
    border-right: 1px solid #ccc;

    .text {
        line-height: 25px;
        height: 25px;
    }

    .text:first-child {
        border-bottom: 1px solid #ccc;
    }
}

.inputs {
    flex: 1;

    .inputBox {
        display: flex;
        height: 25px;
        line-height: 25px;

        span {
            margin: 0 2px;
        }
    }

    .inputBox:first-child {
        border-bottom: 1px solid #ccc;
    }
}

.Button {
    width: 24px;
    border-left: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

.PositionView {
    border-radius: 5px;
    border: 1px solid #ccc;
    height: 51px;
    display: flex;
}
</style>